<template>
	<div class="query">
		<el-form ref="formData" v-bind="$attrs" :label-width="$attrs.labelWidth || '80px'" class="formData">
			<slot name="top" />
			<el-row :gutter="10">
				<XcFormItems form="formData" :options="options" />
			</el-row>
			<slot name="bottom" />
		</el-form>
	</div>
</template>

<script>
	/**
	 * :rules="rules" :model="formData" 
				rules: {
					title: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}, ],
					comment: [{
						required: true,
						message: '请输入原因',
						trigger: 'blur'
					}, ],
				}
		* @description
		*/
	export default {
		inject: ["vm"],
		props: {
			form: String,
			option: String
		},

		computed: {
			formDatas() {
				try {
					if (this.form) return this.vm[this.form];
				} catch (error) {
					console.log(error);
					return [];
				}

				return this.vm.formDatas;
			},
			options() {
				try {
					if (this.option) return this.vm[this.option];
					return this.vm.pageDatas.query;
				} catch (error) {
					this.$toast(`未定义【pages】页面的【query】值`);
					return [];
				}
			},
		},
		methods: {
			validate(cb) {
				return this.$refs['formData'].validate((valid) => {
					cb(valid);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.filter-input-item {
		width: 100%;
		margin-right: 10px;
	}

	.form-item {
		margin-bottom: 0;
	}
</style>>